<template>
  <div>
    <tab>
      <tab-item v-for="(item, index) in categorys" :key="index" @on-item-click="currentCategory = item.id" :selected="currentCategory == item.id">{{ item.title }}</tab-item>
    </tab>

    <card style="padding:10px 5px;">
    <div slot="content" class="card-padding">
      <flexbox :gutter="0" wrap="wrap">
      <flexbox-item :span="1/2" class="shoplist" v-for="(coach, index) in coachs" :key="index">
        <router-link :to="'/shop/view/' + coach.id">
          <div>
            <img :src="coach.thumb + '?x-oss-process=image/resize,w_200'" width="100%">
          </div>
          <div style="text-align:center;color:#565656;padding-bottom:10px;">{{ coach.name }}</div>
        </router-link>
      </flexbox-item>
      </flexbox>
    </div>
    </card>
  </div>
</template>

<script>
import { Tab, TabItem, Card, Flexbox, FlexboxItem } from 'vux'
import { category as categoryAPI, coach as coachAPI } from '@/server/getData'

export default {
  components: {
    Tab,
    TabItem,
    Card,
    Flexbox,
    FlexboxItem
  },
  data () {
    return {
      currentCategory: 0,
      sourcecoachs: [],
      categorys: []
    }
  },
  created () {
    this.initData()
  },
  computed: {
    coachs: function () {
      return this.sourcecoachs.filter((v) => {
        return v.pid === this.currentCategory
      })
    }
  },
  methods: {
    async initData () {
      this.getCategorys()
      this.getCoachs()
    },
    async getCategorys () {
      let {success, data} = await categoryAPI.fetchCategorys({pid: 2})
      !success && this.$vux.alert.show({
        title: '错误提示',
        content: data.message
      })
      this.categorys = data
      this.currentCategory = data[0].id
    },
    async getCoachs () {
      this.$vux.loading.show({ text: '获取数据...' })
      let {success, data} = await coachAPI.fetchCoachs()
      this.$vux.loading.hide()
      !success && this.$vux.alert.show({
        title: '错误提示',
        content: data.message
      })
      this.sourcecoachs = data
    }
  }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';

.box {
  padding: 15px;
}
.active-6-1 {
  color: rgb(252, 55, 140) !important;
  border-color: rgb(252, 55, 140) !important;
}
.active-6-2 {
  color: #04be02 !important;
  border-color: #04be02 !important;
}
.active-6-3 {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}
.tab-swiper {
  background-color: #fff;
  height: 100px;
}
.shoplist div{
	padding:3px 6px;
}
</style>
